<template>
	<view class="productSort" :style="'height:' + winHeight + 'px'">
		<view class="header acea-row row-center-wrapper">
			<view class="acea-row row-between-wrapper input">
				<text class="iconfont icon-sousuo"></text>
				<view class="input-box"><input type="text" placeholder="搜索您要预约的科室" v-model="keyword"
						@confirm="getAllCategory" confirm-type="search" @input="searchInp" /></view>
			</view>
		</view>
		<view class="con-box">
			<view class="aside">
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation="true"
					:scroll-into-view="intoindex">
					<view v-for="(item, index) in productList">
						<view class="item acea-row row-center-wrapper" :class="index == navActive ? 'on' : ''"
							v-if="item.children && item.children.length > 0" :key="item.id"
							@click="tap(index, 'b' + index)" :id="'sort' + index">
							<text class="item_text">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="conter">
				<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;"
					@scroll="scroll" scroll-with-animation="true">
					<view v-for="(p, i) in productList">
						<view class="listw" :id="'b' + i + index" v-for="(item, index) in p.children" :key="item.id">
							<view class="title acea-row">
								<view class="name">{{ item.name }}</view>
							</view>
							<view class="list acea-row">
								<block v-for="(itemn, indexn) in item.children" :key="itemn.id">
									<navigator hover-class="none"
										:url="'/pages/shops/subs_appointment/register/index?id=' + itemn.id + '&title=' + itemn.name"
										class="item acea-row row-column row-middle">
										<view class="picture">
											<image :src="itemn.pic"></image>
										</view>
										<view class="name line1">{{ itemn.name }}</view>
									</navigator>
								</block>
							</view>
						</view>
					</view>
					<view :style="'height:' + (height - 300) + 'rpx;'"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	let app = getApp();
	import {
		appointmentList
	} from '@/api/appointment.js';
	export default {
		data() {
			let active = 0;
			// #ifdef H5
			active = location.hash.substr(1);
			// #endif
			return {
				navlist: [],
				productList: [],
				navActive: 0,
				activceCate: active,
				number: '',
				height: 0,
				hightArr: [],
				toView: '',
				winHeight: 0,
				pidIndex: 0,
				intoindex: '',
				keyword: ''
			};
		},
		watch: {
			navActive(n) {
				// #ifdef H5
				history.replaceState(null, null, '#' + this.productList[n].store_category_id);
				// #endif
			}
		},
		onLoad(options) {
			let that = this;

			if (options.activceCate) {
				this.activceCate = options.activceCate;
			}

			uni.getSystemInfo({
				success: function(res) {
					//console.log(res, 'res');
					that.winHeight = res.windowHeight;
				}
			});

			// #ifdef H5
			document.body.addEventListener(
				'touchmove',
				function(event) {
					if (that.$route.path == '/pages/goods_cate/goods_cate') {
						event.preventDefault();
					}
				}, {
					passive: false
				}
			);
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				path: '/pages/goods_cate/goods_cate?activceCate=' + this.productList[this.navActive] ? this
					.productList[this.navActive].store_category_id : 0
			};
		},
		onShareTimeline: function() {
			return {
				query: {
					activceCate: this.productList[this.navActive] ? this.productList[this.navActive]
						.store_category_id : 0
				}
			};
		},
		// #endif
		onShow() {
			if (!this.productList.length) {
				this.getAllCategory();
			} else {
				let pid = uni.getStorageSync('storeIndex');
				if (pid) {
					this.activceCate = pid;
				}
				//console.log('rk==>[onshow]' + pid);
				this.getCateFrom(this.productList);
				setTimeout(() => this.tap(this.pidIndex, 'b' + this.pidIndex), 200);
			}
		},
		onHide() {},
		//点击底部tabbar调用
		onTabItemTap() {
			this.getAllCategory();
		},
		onReady() {
			// setTimeout(res=>{
			// 	this.intoindex = "sort13"
			// },2000)
		},
		methods: {
			searchInp(e) {
				var val = e.detail.value;
				if (!val) {
					this.getAllCategory();
				}
			},
			infoScroll: function() {
				let that = this;
				//this.number = that.productList[len - 1].children.length;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.windowHeight * (750 / res.windowWidth) - 98;
					}
				});
				let hightArr = [];
				for (let i = 0; i < that.productList.length; i++) {
					if (!that.productList[i].children) {
						continue;
					}
					for (let j = 0; j < that.productList[i].children.length; j++) {
						//获取元素所在位置
						let query = uni.createSelectorQuery().in(this);
						let idView = '#b' + i + j;
						query.select(idView).boundingClientRect();
						query.exec(function(res) {
							let top = res[0].top;
							hightArr.push({
								top,
								i
							});
						});
					}
				}
				that.hightArr = hightArr;
			},
			tap: function(index, id) {
				this.toView = '' + id + 0;
				this.navActive = index;
			},

			getAllCategory: function() {
				let that = this;
				let value = '';
				that.pidIndex = 0;
				appointmentList({
					keyword: that.keyword
				}).then(res => {
					that.productList = res.data;
					that.getCateFrom(that.productList);
					that.$nextTick(function() {
						that.infoScroll();
						setTimeout(() => that.tap(that.pidIndex, 'b' + that.pidIndex), 200);
					});
					that.activceCate = 0;
					that.intoindex = '';
					uni.removeStorageSync('storeIndex');
				});
			},
			//获取首页分类来源
			getCateFrom: function(arr) {
				let pid = uni.getStorageSync('storeIndex');
				let i = '';
				arr.map((item, index) => {
					if ((this.activceCate && item.store_category_id == this.activceCate) || item
						.store_category_id == pid) {
						this.pidIndex = index;
						i = 'sort' + index;
						// this.intoindex = 'sort'+index
						return;
					}
				});
				this.$nextTick(() => {
					this.intoindex = i;
				});
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop + 10;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
						this.navActive = 0;
					} else if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ?
							scrollArr[i + 1].top : 0) - scrollArr[0].top) {
						this.navActive = scrollArr[i].i;
					} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
						this.navActive = scrollArr[scrollArr.length - 1].i;
					}
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;

		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}

	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input .input-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
		color: #999999;

		input {
			font-size: 28rpx;
			width: 100%;
			height: 100%;
		}
	}

	.productSort .aside {
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 200rpx;
		height: 100%;
		overflow: hidden;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 28rpx;
		color: #424242;
	}

	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.productSort .aside .item_text .text {}

	.productSort .aside .item.on {
		background-color: #f7f7f7;
		border-left: 4rpx solid $yy-main-col;
		width: 100%;
		text-align: center;
		color: $yy-main-col;
		font-weight: bold;
	}

	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		background-color: #f7f7f7;
	}

	.productSort .conter .listw {
		// padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}

	.productSort .conter .list .item {
		width: 174rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
</style>
